<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>stu_msg</title>
</head>
<body>
<form method="post" action="#" id="stu_form">
    姓名：
    <input name="name"><br>
    年龄：
    <input name="age"><br>
    地址：
    <select name="province" id="province">
        <option value="">---请选择省份---</option>
        <!--<option value="110000">北京</option>-->
    </select>
    <select name="city" id="city">
        <option value="">---未选择省份---</option>
        <!--<option value="110100">市辖区</option>
        <option value="110200">县</option>-->
    </select><br>
    <input type="submit" id="submit">
</form>

<script src="js/axios-0.18.0.js"></script>
<script>
    //绑定页面加载完毕事件
    window.onload = function () {
        axios.post("http://localhost:8080/provinceCase/provinceServlet").then(resp => {
            let provinces = resp.data;
            //console.log(provinces);
            let option = '<option value="">---请选择省份---</option>';
            for (const p of provinces) {
                option += '<option value=' + p.id + ">" + p.province + '</option>';
            }
            document.getElementById("province").innerHTML = option;
        });
    };
    //绑定元素改变事件
    document.getElementById("province").onchange = function () {
        let fatherID = this.value;
        if (fatherID) {
            //发送请求，注意post请求参数形式为JSON对象
            axios.post("http://localhost:8080/provinceCase/cityServlet", {"fatherID": fatherID})
                .then(resp => {
                    let cities = resp.data;
                    console.log(cities);
                    let option = '';
                    for (const c of cities) {
                        option += '<option value=' + c.cityID + ">" + c.city + '</option>';
                    }
                    document.getElementById("city").innerHTML = option;
                });
        } else {
            let option = '<option value="">---未选择省份---</option>';
            document.getElementById("city").innerHTML = option;
        }
    };
</script>
</body>
</html>